<template>
  <div class="container">
    <div class="panel">
      <div class="up-view">
        <div class="up-left">
          <div class="open-picker" @click="popupShow = true">
            {{ pickerName }} <svg-icon icon-class="arrow-down" class="icon" />
          </div>
          <div class="balance">
            0.00
            <div class="sub">USDT</div>
          </div>
        </div>
        <div class="up-right">
          <div
            class="btn"
            @click="$global.navigate({ path: '/wallet/withdrawal' })"
          >
            提现
          </div>
          <div class="btn">充值</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="number-view">
        <div class="number-item">
          <div class="number-item-label">靜態收益</div>
          <div class="number-item-value">
            0.00
            <div class="sub">USDT</div>
          </div>
        </div>
        <div class="number-item">
          <div class="number-item-label">動態收益</div>
          <div class="number-item-value">
            0.00
            <div class="sub">USDT</div>
          </div>
        </div>
        <div class="number-item">
          <div class="number-item-label">節點分紅</div>
          <div class="number-item-value">
            0.00
            <div class="sub">USDT</div>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <van-tabs
        v-model:active="tabActive"
        line-width="16px"
        title-active-color="#2c2c2c"
        title-inactive-color="#919191"
        color="#0762ff"
        background="rgba(0,0,0,0)"
      >
        <van-tab title="全部"></van-tab>
        <van-tab title="靜態收益"></van-tab>
        <van-tab title="動態收益"></van-tab>
        <van-tab title="節點分紅"></van-tab>
      </van-tabs>
      <div class="tab-main"></div>
    </div>
    <van-popup v-model:show="popupShow" position="bottom">
      <van-picker
        show-toolbar
        title="标题"
        :columns="pickerList"
        @confirm="handlePicker('onConfirm', $event)"
        @cancel="handlePicker('onCancel', $event)"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  computed: {
    pickerName() {
      const f = this.pickerList.filter(
        (item) => item.value == this.pickerValue
      );
      if (f.length == 0) {
        return "";
      }
      return f[0].text;
    },
  },
  data() {
    return {
      tabActive: 0,
      pickerList: [
        {
          text: "总资产",
          value: "1",
        },
        {
          text: "USDT",
          value: "usdt",
        },
        {
          text: "WONE",
          value: "wone",
        },
      ],
      popupShow: false,
      pickerValue: "1",
    };
  },
  mounted() {},
  methods: {
    /**
     * 选择币种触发
     * @param {*} type onConfirm = 确认  onCancel = 取消
     * @param {*} e
     */
    handlePicker(type, e) {
      if (type == "onConfirm") {
        this.pickerValue = e.value;
      }
      this.popupShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
